<template>
  <Editor v-model="content" :init="tinyData" :api-key="apiKey"></Editor>
</template>

<script setup lang="ts">
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import {onMounted, reactive, ref} from "vue";

const content = ref()
const apiKey = "yirm2da1th9x2m4o070kyqyx93izmw3f1eteffr6knkraowv"

const tinyData = reactive({
  // 可以引入插件
  plugins: "advlist fullscreen code image link",
})


// 富文本编辑器第一层栏目为菜单栏member，第二层为工具栏toolbar
tinymce.init({
  // 选择器，挂在指定容器元素
  selector: "#tinymce",
  language: "zh-Hans",
  language_url: "/src/plugins/tinymce/langs/zh-Hans.js",
  // 正文内容为空时提示信息
  placeholder: "tinymce正文内容",
  // 富文本编辑器背景皮肤
  skin: "oxide",
  skin_url: "/src/plugins/tinymce/skins/ui/oxide",
  // 富文本编辑器主题
  theme: "silver",
  theme_url: "/src/plugins/tinymce/themes/silver",
  // 隐藏工具栏,如果设置即不隐藏
  toolbar: 'undo redo forecolor bold italic | alignleft aligncenter alignright | code image link',
  // 可以引入插件
  plugins: "advlist fullscreen code image link",
  //
  menubar: false,
  // 开启内联模式
  inline: true,
  // 允许有注释
  allow_conditional_comments: true,
  // 富文本编辑器字体
  font_family_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
  // 富文本编辑器尺寸大小
  height: "100%",
  width: "100%",
})

onMounted(() => {
  tinymce.init({
    selector: "#tinymce"
  })
})


// tinymce富文本编辑器在此
// 参考博客 https://blog.csdn.net/JSPSEO/article/details/125222177
</script>

<style scoped>

</style>
